/* eslint-disable array-callback-return */
import React, { Component } from "react";
import axios from "../../../http/request";
import styles from "./platform.module.scss";
import '../../../assest/iconfont/icon.css'
export default class index extends Component {
  state = {
    datas: [],
    imgUrl: "",
    isShow: false,
  };
  componentDidMount() {
    axios.get("/reader-service/media").then((res) => {
      console.log(res.data);
      this.setState({
        datas: res.data,
      });
    });
  }
  showMessage = (imgId) => {
    return () => {
      const { datas } = this.state;
      this.setState({ isShow: true });
      datas.map((item) => {
        if (imgId === item.id) this.setState({ imgUrl: item.code_img });
      });
    };
  };
  closeMessage = () => {
    this.setState({ isShow: false });
  };
  render() {
    return (
        <div className={styles.wrapper}>
          <div className='header'>
            <div className='left' onClick={() => {this.onLeftClick()}}>
              <i className='iconfont iconzuojiantou'></i>
            </div>
          </div>
          <div className={styles.platform}>
            <div className={styles.title}>点击查看二维码海报</div>
            <div className={styles.logo}>
              {this.state.datas.map((item) => {
                return (
                    <div
                        key={item.id}
                        className={styles.logoItem}
                        onClick={this.showMessage(item.id)}
                    >
                      <div>
                        <img
                            src={item.logo}
                            alt={item.name}
                            style={{
                              width: "58px",
                              height: "58px",
                              borderRadius: "50%",
                            }}
                        />
                      </div>
                      <div>{item.name}</div>
                    </div>
                );
              })}
            </div>
            {this.state.isShow ? (
                <div className={styles.message}>
                  <div className={styles.mask} onClick={this.closeMessage}></div>
                  <div className={styles.messageBox}>
                    <img src={this.state.imgUrl} alt="" />
                    <div className={styles.close} onClick={this.closeMessage}>
                      <i className="iconfont icon-x_"></i>
                    </div>
                  </div>
                </div>
            ) : (
                ""
            )}
          </div>
        </div>
    );
  }
  onLeftClick(){
    window.history.back()
  }
}
